<style lang="scss" scoped="">

  .content{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-content:flex-start;
    flex-wrap:wrap;
  }
  .dropdown_btn{
    width: 100%;
    height:30px;
    background-color: rgba(0,0,0,0);
    border:none;
    font-size: 14px;
  }
  .dropdown_btn:focus{
    outline:0;
  }
  .dropdown_btn:hover{
    background-color: gainsboro;
  }
  .entry{
    width: 33.33%;
    height: 250px;
    padding-right: 7px;
    padding-left: 7px;
    padding-bottom: 14px;
    .entry_inner{
      background-color: white;
      height: 100%;
      width: 100%;
      box-shadow: 1px 1px 2px rgba(68,68,68,0.1),-1px -1px 2px rgba(68,68,68,0.1);
    }
    .des{
      padding-left: 11px;
      padding-top: 10px;
      font-size: 10px;
      color:rgb(150,150,150);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .info_right{
    padding-right: 17px;

    display: flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap: nowrap;

  }
  .question_list{
     white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        overflow: hidden;
        color:rgb(100,100,100);
        margin-bottom: 2px
  }
</style>
<template>
  <mpage>
    <mheader/>
    <minfo>
      <div slot="right" class="info_right">
        <Button type="primary" style="width:70px" size="small" @click="openAddSubject()">新增主题</Button>
      </div>
    </minfo>
    <mcontainer>
      <div class="content">
        <template v-for="(item,index) in subject_list">
          <div class="entry">
            <Card style="width:100%" :bordered="false" class="entry_inner" >
              <div slot="title" @click="open_k_entry(item)">
                <div style="display: flex;align-items: center">
                  <Icon type="ios-browsers-outline" size="20" color="#00c853"/>
                  {{item.subject}}<Tag color="green" style="margin-left: 10px;">知识数量{{item.kEntrys.length}}</Tag>
                </div>

                <Tooltip placement="top" :content="item.des" style="width:100%" max-width="400">
                  <div class="des">{{item.des}}</div>
                </Tooltip>

              </div>

              <div slot="extra">
                <Dropdown placement="bottom-end" >
                  <a href="javascript:void(0)" style="color:#00c853">
                    操作
                  </a>
                  <DropdownMenu slot="list">
                    <button class="dropdown_btn" @click="edit_subject(index,item.id)">编辑</button>
                    <button class="dropdown_btn" @click="delete_subject(item.id)">删除</button>

                  </DropdownMenu>
                </Dropdown>
              </div>
              <div style="padding-left: 10px" @click="open_k_entry(item)">
                <template v-if="item.kEntrys.length>0">
                  <ul >
                    <li v-for="(kentry,index_q) in item.kEntrys" v-if="index_q<=5" class="question_list">
                      {{kentry.key_question}}
                    </li>
                  </ul>
                </template>
                <template v-else>
                  <div style="text-align: center;padding-top: 40px;color:rgb(200,200,200)">
                    该主题下还没有知识哦，快点击进去新建知识吧！
                  </div>

                </template>

              </div>

            </Card>
          </div>
        </template>

        <div class="entry">
          <div></div>
        </div>
        <div class="entry">
          <div></div>
        </div>
      </div>

      <Modal @on-ok="add_ok()"
        v-model="add_menu.show"
        :title="!add_menu.isupdate?'新增知识主题':'编辑知识主题'">
        <p style="font-size: 18px;padding-bottom: 10px">主题名称</p>
        <p> <Input v-model="add_menu.subject" placeholder="请输入主题" class="input"  size="large"/></p>
        <p style="font-size: 18px;padding-bottom: 10px;padding-top: 10px">主题描述</p>
        <p><Input v-model="add_menu.des"  type="textarea" placeholder="Enter something..." :rows="3"/></p>
      </Modal>
    </mcontainer>

  </mpage>




</template>

<script>
  import mpage from "../comp_chatter/mpage"
  import mheader from "../comp_chatter/mheader"
  import minfo from "../comp_chatter/minfo"
  import mcontainer from '../comp_chatter/mcontainer'
  import Axios from 'axios'

 
//  import jq from "../plugins/jquery"

  import ajax from "../ajax_util"
  export default {
    name: 'knowledge_page',
    components: {
      mheader,mpage,minfo,mcontainer
    },
    props:{

    },
    data() {
      return {
        add_menu:{
          show:false,
          subject:"",
          des:"",
          isupdate:false,
          updateId:-1
        },
        subject_list:[
          {
            subject:"PaaS基础知识 ",
            id:3,
            kEntrys:[
              {
                key_question:"fff"
              }
            ]
          }
        ]
      }
    },
    mounted() {

      this.get_all_subject()




    },
    methods: {

      get_all_subject(){
        var that=this;
        var url=this.CONFIG.url_know+'/subjects';
//        that.$Loading.start();
        ajax.get({
          url:url,
          that:that,
          success:function(data){
            that.subject_list=data

        }})

      },
      open_k_entry(item){
        var subject_id=item.id
        let routeData = this.$router.resolve({
          name: 'know_edit',
          params: { id: subject_id }
        })

        window.open(routeData.href, '_blank')
      },
      openAddSubject(){
        this.add_menu.isupdate=false;
        this.add_menu.show=true;
        this.add_menu.subject="";
        this.add_menu.des="";
      },
      add_ok(){
        var that=this;
        var url=this.CONFIG.url_know+'/subject'
        let subject={
          subject:this.add_menu.subject,
          des:this.add_menu.des
        };
        if(this.add_menu.isupdate){//说明是修改，不是新增
          subject["id"]=this.add_menu.updateId;
          ajax.put({
            url:url,
            that:that,
            data:subject,
            success:function(data){
              that.get_all_subject();
              that.$Notice.success({
                title: '成功修改知识主题'
              });
            }
          })
        }else{//说明是新增
          ajax.post({
            url:url,
            that:that,
            data:subject,
            success:function(data){
              that.get_all_subject();
              that.$Notice.success({
                title: '成功新建知识主题'
              });
            }
          })
        }


      },
      edit_subject(index,id){
        var that=this;
        this.add_menu.isupdate=true;
        this.add_menu.updateId=id;
        this.add_menu.show=true;
        this.add_menu.subject=this.subject_list[index].subject;
        this.add_menu.des=this.subject_list[index].des;
      },
      delete_subject(id){

        var that=this;
        var url=this.CONFIG.url_know+'/subject/'+id;
        console.log(url);
        ajax.del({
          url:url,
          that:that,
          success:function(){
            that.get_all_subject();
            that.$Notice.success({
              title: '成功删除知识主题'
            });
          }
        });


      }
    }
  }
</script>
